<!DOCTYPE html>

<html lang='en'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/react.development16.4.0.js"></script>
    <script src="./lib/react-dom.development16.4.0.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="app">
    </div>
    <script type="text/babel">
         //定义AddTodo组件
  class AddTodo extends React.Component{
    constructor(props){
      super(props);
      this.add = this.add.bind(this);
    }
    add(){
      //获取输入的值
      let value = this.refs.newTodo.value;
      //console.log(typeof value);
      //判断输入的内容是否为空格
      if(!value.trim()){
        return
      }
      //将输入的值添加到 todoList中
      //console.log(value);
      this.props.add(value);
      this.refs.newTodo.value = '';
    }
    render(){
      return (
          <div>
            <input ref="newTodo" type="text" />
            <button onClick={this.add}>Add #{this.props.length}</button>
          </div>
      )
    }
  }
  //定义 TodoList 组件
  class TodoList extends React.Component{
    render(){
      let {todoList} = this.props;
      return (
          <ul>
            {
              todoList.map(function (item, index) {
                return <li key={index}>{item}</li>
              })
            }
          </ul>
      )
    }
  }
  class App extends React.Component{
    constructor(props){
      super(props);
      this.state = {
        todoList : ['吃饭', '睡觉', '打豆豆', '学习']
      };
      this.add = this.add.bind(this);
    }
    add(newTodo){
      console.log(newTodo);
      let todoList = this.state.todoList;
      todoList.unshift(newTodo);
      this.setState({todoList})
    }
    render(){
      let {todoList} = this.state;
      return (
          <div>
            <h2>Simple TODO List</h2>
            <AddTodo add={this.add} length={this.state.todoList.length}/>
            <TodoList todoList={todoList}/>
          </div>
      )
    }
  }

  //渲染组件
  ReactDOM.render(<App />, document.getElementById('app'));
    </script>
</body>

</html>